<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    </head>
    <body>
        <div id="app">
            {{ fullName }}
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                /* 使用watch方式
                data: {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                },
                watch: {
                    firstName: function (val) {
                        this.fullName = val + ' ' + this.lastName
                    },
                    lastName: function (val) {
                        this.fullName = this.firstName + ' ' + val
                    }
                }*/
                /**/
                // 使用计算属性，因此能用计算属性的地方就用计算属性
                data: {
                    firstName: 'Foo',
                    lastName: 'Bar'
                },
                computed: {
                    /* 计算属性默认只有get方法
                    fullName: function () {
                        return this.firstName + ' ' + this.lastName
                    }
                    */
                    // 指定计算属性的set方法
                    fullName: {
                        // getter
                        get: function () {
                            return this.firstName + ' ' + this.lastName
                        },
                        // setter
                        set: function (newValue) {
                            var names = newValue.split(' ')
                            this.firstName = names[0]
                            this.lastName = names[names.length - 1]
                        }
                    }
                }
            })
        </script>
        <style type="text/css">
        </style>
    </body>
</html>